[ Ionic x Angular] ワンソースでiOSとAndroidアプリを開発！

はじめに

こんにちは！クラスメソッドのキムテウです。 今回はワンソースでiOSアプリとAndroidアプリを開発することができるIonicフレームワークを紹介します。

Ionicとは

Ionicはウェブ技術を活かせてモバイルアプリ開発ができるフレームワークです。基本的にはスマホのWebViewというコンポーネント上で動作するもので、この様な形態をハイブリッドアプリと言います。ちなみにIonicはPWA(Progressive Web App)の開発もサポートしています。

数年前はパフォーマンスがネイティブアプリと比べてよくない感じがありましたが最近はスマホのハードウェアスペックがすごく良くなってその性能差を感じられないようになりました。つまり、ウェブ言語のワンソースでAgileでiOSやAndroidはもちろん、PWAまで開発できるものです。

最近はベースだったAngular以外にもReactやVueベースに開発することができるようになり、WEB系エンジニアが使いやすくなったと思ってます。私はAngularプロジェクトの仕組みが好きでAngularベースに開発してましたので、今回はAngularベースでHello Worldをやってみたいと思います。

Ionicインストール

Ionicは最新のNode.jsとnpmのLTS(Long Term サポートバージョン)使用をお勧めしています。

$ node --version
$ npm --version

バージョンを確認するには上記の様にコマンドを入力して確認ください。現在としてのLTSバージョンはNode.jsは10.16.0、npmは6.9.0です。

Ionicのインストールは簡単です。npmでionicをグロバールにインストールをするだけで完了です。

$ npm install -g ionic

インストールが終わったらターミナル上へionicと入力してインストールが正常に終わったかどうか確認しましょう！

$ ionic

上記の画面が見られたらOKです。

IonicでHello Worldをやってみよう！

任意のディレクトリで以下のコマンドを実行します。

$ ionic start helloworld tabs --type=angular

ionic startはプロジェクトを作るコマンドです。helloworldはプロジェクト名、tabsはionicから基本的にサンプルで提供してくれるboilerplateプロジェクトです。私はblankオプションをよく使います。最後にtypeはangularにしました。

$ cd helloworld
$ ionic serve

作ったプロジェクトに移動してionic serveを書いてEnterを押しましょう！

この画面が見られたら完了です！